<template>
<view>
		<form>
			<view class="cu-bar bg-white">
				<view class="action">
					身份证正面
				</view>
			</view>
			<view class="cu-form-group">
				<view class="code1">
					<image :src="cardFrontParh" mode="widthFix" @click="uploadImage(1)"></image>
				</view>
			</view>
			<view class="cu-bar bg-white cu-bar-border-top">
				<view class="action">
					身份证反面
				</view>
			</view>
			<view class="cu-form-group">
				<view class="code2">
					<image :src="cardBackParh" mode="widthFix" @click="uploadImage(2)"></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">真实姓名</view>
				<input placeholder="请输入真实姓名" v-model="IDCardInfo.name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input  type="number" placeholder="请输入手机号" v-model="userPhone" maxlength=11></input>
			</view>
			<view class="cu-form-group">
				<view class="title">证件号码</view>
				<input placeholder="请输入身份证号码" v-model="IDCardInfo.idNumber"></input>
			</view>
			<view class="cu-form-group">
				<view class="title effective-date">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</view>
				<input placeholder="请输入性别" v-model="IDCardInfo.gender"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">居住地址</view>
				<input placeholder="请输入居住地址" v-model="IDCardInfo.address"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">选择教练</view>
								<picker @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input">{{array[index]}}</view>
							</picker>
						
			</view>
			<view class="save">
				<button class="btn" :style="'background:' + colors" :disabled="btnLoading" :loading="btnLoading" @click="saveUserInfo">
					立即报名
				</button>
			</view>
		</form>
	</view>
</template>
 <script>
		 import {
	         pathToBase64,
	         base64ToPath
	     } from "../../components/imgtobase64/img_transform_base64.js"
     export default {
     		data() {
     			return {
     				IDCardInfo: {
     									name: '',
     									address: '',
     									idNumber: '',
     									gender: '',
     									
     				},
					cardFrontParh:"",
					cardBackParh:"",
					array: ['请选择教练','袁艺菲', '张三', '李四'],
					index: 0,
					userPhone:""
     			}
     		},
     		
     		onLoad() {
     		            var _this = this
     		            // 获取身份证识别的 accessToken
     		            _this.getAccessToken()
     		        },
     		onShow() {
      
     		},
     		methods: {
				saveUserInfo(){
					let code=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
					let name=/^[\u4e00-\u9fa5]{0,}$/
					let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
					
									if(!this.IDCardInfo.name)
									{
										uni.showToast({
											title: '请输入姓名',
											icon: 'none'
										})
										return 
									}else if(!name.test(this.IDCardInfo.name)){
										uni.showToast({
											title: '请输入正确的姓名',
											icon: 'none'
										})
										return
										}
										if (!this.userPhone) {      //判断如果手机号为空，提示用户输入手机号
											uni.showToast({
												title: '请输入手机号',
												icon: 'none'
											})
											return 
										} else if (!reg.test(this.userPhone)) {        //判断手机号格式时候正确
											uni.showToast({
												title: '请输入正确的手机号',
												icon: 'none'
											})
											return
										}
										if(!this.IDCardInfo.idNumber)
										{
											uni.showToast({
												title: '请输入身份证号',
												icon: 'none'
											})
											return 
										}else if(!code.test(this.IDCardInfo.idNumber)){
											uni.showToast({
												title: '请输入正确的身份证号码',
												icon: 'none'
											})
											return
									}
									if(!this.IDCardInfo.gender)
									{
										uni.showToast({
											title: '请输入性别',
											icon: 'none'
										})
										return 
									}
									if(!this.IDCardInfo.address)
									{
										uni.showToast({
											title: '请输入家庭地址',
											icon: 'none'
										})
										return 
									}
									
									if(this.index==0)
									{
										uni.showToast({
											title: '请选择教练',
											icon: 'none'
										})
										return 
									}
									
								uni.navigateTo({
									url:"/pages/signup/pay"
								})
				},
				 bindPickerChange: function(e) {
				            console.log('picker发送选择改变，携带值为', e.detail.value)
				            this.index = e.detail.value
				        },
				 getAccessToken: function() {
				                var _this = this
				                uni.request({
				                    url: "https://aip.baidubce.com/oauth/2.0/token",
				                    data: {
				                        grant_type: "client_credentials",
				                        client_id: "6YzkaLE2mgEQNFemDM0qXvgQ", //API Key
				                        client_secret: "LpUSVrzPLhGR2LE4W8egK4AF4iEsbVhI" //Secret Key
				                    },
				                    method: 'POST',
				                    header: {
				                        'Content-Type': 'application/x-www-form-urlencoded'
				                    },
				                    success(res) {
				                        _this.accessToken = res.data.access_token
				                        console.error("获取 身份识别的 accessToken = " + JSON.stringify(_this.accessToken))
				                    }
				                })
				            },
     			uploadImage: function(ocrtype) {
     			                var _this = this
     			                var cardType = ""
     			                if (ocrtype == 1) {
     			                    cardType = "front"
     			                } else {
     			                    cardType = "back"
     			                }
     			                uni.chooseImage({
     			                    count: 1, //默认9
     			                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
     			                    sourceType: ['album'], //从相册选择
     			                    success(res) {
     			                        var tempImg = res.tempFilePaths[0]
     			                        console.log("选择图片路径 tempImg = " + JSON.stringify(tempImg))
     			                        // 转base64
     			                        pathToBase64(res.tempFilePaths[0])
     			                            .then(base64 => {
     			                                // 识别
     			                                uni.request({
     			                                    url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' +
     			                                        _this.accessToken,
     			                                    data: {
     			                                        id_card_side: cardType,
     			                                        image: base64,
     			                                        language_type: 'ENG', //识别语言类型，默认中英文结合
     			                                        detect_direction: true, //检测图像朝向
     			                                    },
     			                                    method: 'POST',
     			                                    header: {
     			                                        'Content-Type': 'application/x-www-form-urlencoded'
     			                                    },
     			                                    success: (res) => {
     			                                        // console.error("身份识别的信息 info = " + JSON.stringify(res
     			                                        //     .data))
     			                                        if (ocrtype == 1) { //身份证正面
     			                                            var cardName = res.data.words_result.姓名
     			                                            if (cardName != undefined) {
     			                                                _this.cardFrontParh = tempImg
     			                                                                                               _this.IDCardInfo.name = res.data.words_result
     			                                                                                                   .姓名.words
     			                                                                                               _this.IDCardInfo.ethnic = res.data.words_result
     			                                                                                                   .民族.words
     			                                                                                               _this.IDCardInfo.address = res.data
     			                                                                                                   .words_result.住址.words
     			                                                                                               _this.IDCardInfo.idNumber = res.data
     			                                                                                                   .words_result.公民身份号码.words
     			                                                                                               _this.IDCardInfo.birthday = res.data
     			                                                                                                   .words_result.出生.words
     			                                                                                               _this.IDCardInfo.gender = res.data.words_result
     			                                                                                                   .性别.words
     			                                            } else {
     			                                                uni.showToast({
     			                                                    title: "请选择正确或清晰的正面身份证图片",
     			                                                    icon: "none",
     			                                                    duration: 2000
     			                                                })
     			                                            }
     			                                        } else {
     			                                            var backName = res.data.words_result.签发机关
     			                                            if (backName != undefined) {
     			                                                _this.cardBackParh = tempImg
     			                                                _this.IDCardInfo.signDate = res.data
     			                                                    .words_result.签发日期.words
     			                                                _this.IDCardInfo.issueAuthority = res.data
     			                                                    .words_result.签发机关.words
     			                                                _this.IDCardInfo.expiryDate = res.data
     			                                                    .words_result.失效日期.words
     			                                            } else {
     			                                                uni.showToast({
     			                                                    title: "请选择正确或清晰的反面身份证图片",
     			                                                    icon: "none",
     			                                                    duration: 2000
     			                                                })
     			                                            }
     			                                        }
     			                                    }
     			                                })
     			                            })
     			                            .catch(error => {
     			                                console.error("error = " + JSON.stringify(error))
     			                            })
     			                    }
     			                })
     			            },
     			
     		},
     	}
     </script>
      
     <style>
		 .cu-form-group>picker .uni-input{
			float: right;
			margin-right: 380rpx;
		 }
		 .cu-form-group .title{
			 float: left;
		 }
		  .cu-form-group>input{
			  padding-left: 100rpx;
			
		  }
     	.save {
     		position: fixed;
     		bottom: 0;
     		width: 100%;
     		height: 120rpx;
     		display: flex;
     		justify-content: center;
     		align-items: center;
     	}
     	.save .btn {
     		box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
     		width: 70%;
     		height: 80rpx;
     		border-radius: 80rpx;
     		background-color: #00BFFF;
     		color: #fff;
     		justify-content: center;
     		align-items: center;
     		font-size: 30rpx;
     	}
		.cu-form-group{
			border-top: 1rpx solid #eee;
			margin-top: 20rpx;
		}
     	
     	.cu-bar-border-top {
     		border-top: 1rpx solid #eee;
     	}
		.code1{
		width: 450rpx;
		height: 260rpx;
		margin: 0rpx auto;
		background-repeat: no-repeat;
			background-image: url("@/static/signup/front.png");
		}
		.code2{
			width: 450rpx;
			height: 260rpx;
			margin: 0rpx auto;
			background-repeat: no-repeat;
			background-image: url("@/static/signup/back.png");
		}
		.code2>image{
			width: 400rpx;
			height: 306rpx;
		}
		.code1>image{
		width: 400rpx;
		height: 306rpx;
		}
     </style>
